<template>
  <div class="picture">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="https://image.32yx.com/news/43/389843.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="https://image.32yx.com/news/43/389843.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="https://image.32yx.com/news/43/389843.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="https://image.32yx.com/news/43/389843.jpg" alt="" />
      </van-swipe-item>
    </van-swipe>
    <ul class="Icon">
      <li @click="poster">
        <div class="image icon-haibao"></div>
        海报
      </li>
      <li @click="wallpaper">
        <div class="image icon-bizhi"></div>
        壁纸
      </li>
      <li @click="beauty">
        <div class="image icon-meinv"></div>
        美女
      </li>
      <li @click="cos">
        <div class="image icon-cos"></div>
        COSPLAY
      </li>
      <li @click="GarageKit">
        <div class="image icon-shouban"></div>
        手办
      </li>
      <li @click="Four">
        <div class="image icon-manhua"></div>
        四格漫画
      </li>
    </ul>
    <ul class="imgs">
      <li v-for="(item, index) in imgs" :key="index">
        <div @click="xq">
          <img :src="item.url" alt="" />
        </div>
        <p>{{ item.name }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgs: [
        {
          id: 0,
          url: "https://image.32yx.com/news/pjy3wjxo.jpg",
          name: "国风版《海贼王》，路飞像上海滩霸主，女帝娜美旗袍装娇艳欲滴",
        },
        {
          id: 1,
          url: "https://image.32yx.com/news/pzy8qfq5.jpg",
          name: "斗破苍穹小医仙图片壁纸",
        },
        {
          id: 2,
          url: "https://image.32yx.com/news/qdejvbbh.jpg",
          name: "斗破苍穹漫画萧薰儿图片壁纸",
        },
        {
          id: 3,
          url: "https://image.32yx.com/news/18/408518.jpg",
          name: "网游之近战法师的海报2",
        },
        {
          id: 0,
          url: "https://image.32yx.com/news/pjy3wjxo.jpg",
          name: "国风版《海贼王》，路飞像上海滩霸主，女帝娜美旗袍装娇艳欲滴",
        },
        {
          id: 1,
          url: "https://image.32yx.com/news/pzy8qfq5.jpg",
          name: "斗破苍穹小医仙图片壁纸",
        },
        {
          id: 0,
          url: "https://image.32yx.com/news/pjy3wjxo.jpg",
          name: "国风版《海贼王》，路飞像上海滩霸主，女帝娜美旗袍装娇艳欲滴",
        },
        {
          id: 1,
          url: "https://image.32yx.com/news/pzy8qfq5.jpg",
          name: "斗破苍穹小医仙图片壁纸",
        },
      ],
    };
  },
  methods: {
    xq() {
      this.$router.push("/xq");
    },
    poster() {
      this.$router.push("/find/poster");
    },
    wallpaper() {
      this.$router.push("/find/wallpaper");
    },
    beauty() {
      this.$router.push("/find/beauty");
    },
    cos() {
      this.$router.push("/find/COSPLAY");
    },
    GarageKit() {
      this.$router.push("/find/GarageKit");
    },
    Four() {
      this.$router.push("/find/Four");
    },
  },
};
</script>
<style lang="less">
.picture {
  padding: 60px 0;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    img {
      width: 100%;
    }
  }
  .Icon {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2%;
    li {
      width: 25%;
      font-size: 14px;
      margin: 2% 0;
      text-align: center;
      div {
        margin: 1% auto;
        width: 42px;
        height: 42px;
        background-image: url(../../assets/咨询.png);
        background-size: 670%;
        background-repeat: no-repeat;
      }
      .icon-haibao {
        background-position: 52% 20%;
      }
      .icon-bizhi {
        background-position: 16% 20%;
      }
      .icon-meinv {
        background-position: 34% 60%;
      }
      .icon-cos {
        background-position: 34% 0%;
      }
      .icon-shouban {
        background-position: -1% 80%;
      }
      .icon-manhua {
        background-position: 16% 80%;
      }
    }
  }
  .imgs {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    li {
      width: 47%;
      margin-bottom: 4%;
      box-shadow: 0 0 1px #fc6976;
      div {
        display: block;
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        overflow: hidden;
        img {
          position: absolute;
          top: -10%;
          left: 0;
          width: 100%;
        }
      }
      p {
        font-size: 14px;
        height: 40px;
        margin: 4px 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        word-wrap: break-word;
        word-break: break-all;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}
</style>